<template>
  <span class="flex gap-1 items-center text-sm font-normal text-gray-700 bg-white border border-gray-300 px-2 py-1 rounded-sm cursor-pointer hover:bg-gray-50"
        :style="setTagColor()"
        @click="toggleActive"
  >
  <svg width="21" height="12" viewBox="0 0 21 12" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g clip-path="url(#clip0_3946_96030)">
<rect width="20.6486" height="12" fill="url(#pattern0_3946_96030)"/>
</g>
<defs>
<pattern id="pattern0_3946_96030" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_3946_96030" transform="matrix(0.0052356 0 0 0.00900901 -0.0314136 -0.369369)"/>
</pattern>
<clipPath id="clip0_3946_96030">
<rect width="21" height="12" fill="white"/>
</clipPath>
<image id="image0_3946_96030" width="200" height="200" xlink:href=""/>
</defs>
  </svg>
  PaddlePaddle
  </span>
</template>

<script setup>
  const props = defineProps({
    active: Boolean
  })

  const emit = defineEmits(['setActiveFrameworkTag'])

  const toggleActive = () => {
    emit('setActiveFrameworkTag', 'framework', 'paddlepaddle')
  }
  const setTagColor = () => {
    if (props.active) {
      return "color: white; background-color: #4D6AD6"
    }
  }
</script>